<template>
  <van-swipe class="zj-swiper" v-bind="swiperConfig">
    <template v-for="item in swiperItems" :key="item.key">
      <van-swipe-item>
        <img style="width: 100%; height: 100%" :src="item.imgUrl" alt="swiperImage">
      </van-swipe-item>
    </template>
  </van-swipe>
</template>

<script setup lang="ts">
import {PropType} from "vue";

import {ISwiperItem} from "@/components/ZJSwiper/types";

const {swiperConfig, swiperItems} = defineProps({
  swiperConfig: {
    type: Object,
    default: () => ({
      "autoplay": 3000,
      "indicator-color": "#C81C22"
    })
  },
  swiperItems: {
    type: Array as PropType<Array<ISwiperItem>>,
    default: () => []
  }
})
</script>

<style scoped lang="less">
.zj-swiper {
  height: 150px;
}
</style>
